<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<!--[if lt IE 9]>
	      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	</head>
	<body>
		<div class="container">
			<h1>Glyphicons 字体图标</h1>
			<p>包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。</p>
			<p>出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。</p>
			<p>图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 &lt;span> 标签，并将图标类应用到这个 &lt;span> 标签上。</p>
			<p>图标类只能应用在不包含任何文本内容或子元素的元素上。只对内容为空的元素起作用</p>
			<p>图标的可访问性：
				现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的
				输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。
				如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外
				的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。
				如果你所创建的组件不包含任何文本内容（例如， &lt;button> 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，
				这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属相。</p>
			<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
			<p>可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。</p>
			<button type="button" class="btn btn-default" aria-label="Left Align">
			  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
			</button>
			
			<button type="button" class="btn btn-default btn-lg">
			  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
			</button>
			<br>
			
			<p>alert 组件中所包含的图标是用来表示这是一条错误消息的，通过添加额外的 .sr-only 文本就可以让辅助设备知道这条提示所要表达的意思了。</p>
			<div class="alert alert-danger" role="alert">
			  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
			  <span class="sr-only">Error:</span>
			  Enter a valid email address
			</div>
			<br>
			
		</div>
		<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
		<script src="../bootstrap/js/bootstrap.min.js"></script>
	</body>
</html>